<template>
  <!-- 这里时菜品列表内容 -->
  <ul>
    <li v-for="item in menuList">
      <div class="content">
        <div class="msg">
          <div class="left">
            <img
              src="https://img0.baidu.com/it/u=4060770951,4069855872&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              alt=""
            />
          </div>
          <div class="right">
            <div class="title">凉拌土豆丝</div>
            <div class="price">66元</div>
            <div class="sales">销量：2</div>
          </div>
        </div>
        <div class="numcom">
          <span class="btn">+</span>
          <span class="num">0</span>
          <span class="btn">-</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
   name: "content",
};
</script>

<style lang='less' scoped>
.content {
  box-sizing: border-box;
  width: 100%;
  padding: 1.0667vw;
  border-bottom: 1px solid #999;
  background-color: rgba(153, 153, 153, 0.3);
  overflow: hidden;
  .msg {
    margin-top: 1.0667vw;
    display: flex;
    align-items: center;
    .left {
      width: 26vw;
      height: 16vw;
      margin-right: 1.0667vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      .title {
        font-size: 5.3333vw;
      }
      .price,
      .sales {
        color: red;
        font-size: 3.2vw;
      }
    }
  }
  .numcom {
    float: right;
    display: flex;
    margin-right: 4.6667vw;
    margin-bottom: 1.0667vw;
    span {
      display: block;
      width: 6.6667vw;
      height: 6.6667vw;
      font-size: 4.2667vw;
      text-align: center;
      line-height: 6.6667vw;
      border: 1px solid #999;
      border-radius: 50%;
      margin: 0 1.6vw;
    }
    .num {
      border-radius: 0;
    }
  }
}
</style>